<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样式选择器</title>
</head>
<body>
    <!-- <div class="xiangjun">向军大叔</div>
    <div id="app">
        <div class="houdunren hdcms" data="hd">houdunren.com</div>
        <div class="hdcms">hdcms.com</div>
        <li>houdunren</li>
        <li>向军大叔</li>
        <li name="hdcms">hdcms.com</li>
    </div> -->

    <div class="comment">
        <ul class="comment">
            <li>houdunren.com</li>
        </ul>
    </div>

    <script>
        //querySelectorAll 
        //使用querySelectorAll根据css选择器
        // const app = document.getElementById('app');
        // const nodes = app.querySelectorAll('div');
        // console.log(nodes.length);

        //获取id为app中class包含值的子元素
        // const nodes = document.querySelectorAll("#app .hdcms");
        // console.log(nodes);

        //根据元素属性值获取元素集合
        // const nodes = document.querySelectorAll(`#app .hdcms[data='hd']`);
        // console.log(nodes);

        //querySelector
        //querySelector使用CSS选择器获取一个元素，下面是根据属性获取单个元素
        // const node = app.querySelector(`#app .houdunren[data='hd']`);
        // console.log(node);

        //matches
        //用于检测元素是否有指定的样式选择器匹配
        // const app = document.getElementById('app');
        // const nodes = [...app.querySelectorAll('li')].filter((node) => {
        //     return !node.matches(`[name]`);
        // });
        // console.log(nodes);


        //closest
        //查找最近的符合选择器的祖先元素（包含自身），下例查找父级拥有comment类的元素
        const li = document.getElementsByTagName('li')[0];
        const node = li.closest('.comment');
        console.log(node);
        


        

        
    </script>
</body>
</html>